<template>
  <div class="content">
    <MachineGoods/>
    <GoodsDetail v-show="showDetails"/>
    <ShoppingCart v-show="showCarts"/>
    <PayBox v-show="showPayBox"/>
  </div>
</template>

<script>
  import MachineGoods from './MachineGoods.vue';
  import GoodsDetail from './GoodsDetail.vue';
  import ShoppingCart from './ShoppingCart.vue';
  import PayBox from './PayBox.vue';

  export default {
    name:'MachineContent',
    components:{
      MachineGoods,
      GoodsDetail,
      ShoppingCart,
      PayBox
    },
    data(){
      return{
        // 是否展示商品详情
        showDetails:false,
        // 是否展示购物车列表
        showCarts:false,
        // 展示支付成功页面
        showPayBox:false
      }
    },
    mounted(){
      // 展示商品详情
      this.$bus.$on('showDetails',(isShow) => this.showDetails = isShow)
      // 展示购物车列表
      this.$bus.$on('showCarts',(isShow) => this.showCarts = isShow)
      // 展示支付成功页面
      this.$bus.$on('showPayBox',(isShow) => this.showPayBox = isShow)
    }
  }
</script>

<style scoped>
  .content{
    padding: 0 30px;
    width: 100%;
    height: 720px;
    background-color: #eaeaea;
  }
</style>